<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/assets/css/app.css">
    <script src="/assets/js/jquery.min.js"></script>

</head>

<body data-type="widgets">
    <script src="/assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header th:insert="~{/common/header :: #header_div}">

        </header>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="left-sidebar" th:insert="~{/common/menu :: #menu_div}">

        </div>



        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title  am-cf">文件列表</div>


                            </div>
                            <div class="widget-body  am-fr">
                                <div class="am-u-sm-12 am-u-md-12 am-u-lg-6">
                                    <div class="am-form-group tpl-table-list-select">
                                        <select data-am-selected="{btnSize: 'sm'}" id="accountList">
                                          <option th:each="panList,panStat:${panList}" th:text="${panList.key + ' (' + (panList.value.type == 'TIANYI' ? '天翼网盘' : '百度网盘') + ')'}" th:value="${panList.key}"></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="am-u-sm-12">
                                    <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                                        <thead>
                                            <tr>
                                                <th>文件缩略图</th>
                                                <th>文件名</th>
                                                <th>文件类型</th>
                                                <th>文件大小</th>
                                                <th>时间</th>
                                                <th>文件id</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="panlist">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="am-u-lg-12 am-cf">

                                    <div class="am-fr">
                                        <ul class="am-pagination tpl-pagination">
                                            <li class="am-disabled"><a href="#">«</a></li>
                                            <li class="am-active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">»</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="/assets/js/amazeui.min.js"></script>
    <script src="/assets/js/app.js"></script>

</body>
<script>
    $(document).ready(function()
    {
       var current = jQuery("#accountList").val();
       if(current != null && current != '')
       {
           getFileList(-11);
       }

       function getFileList(fileid)
       {
           $.ajax( {
               url:'/getFileDownloadUrl',// 跳转到 action
               data:{
                   account : current,
                   fileid : fileid
               },
               type:'post',
               cache:false,
               dataType:'json',
               success:function(data)
               {
                  if(data.result != '' && data.result != null)
                  {
                      var json = eval('(' + data.result + ')');
                      var fileList = json.data;
                      var html = "";
                      for(var index = 0; index < fileList.length;index ++)
                      {
                          var item = fileList[index];
                          var imgUlr = '/assets/img/file.png';
                          if(item.icon != undefined)
                          {
                              imgUlr = item.icon.largeUrl;
                          }
                          html += "<tr class='gradeX'><td><img src='" + imgUlr + "' class='tpl-table-line-img'></td>";

                          html += "<td class='am-text-middle'>" + item.fileName +  "</td>";
                          var fileType = item.fileType;
                          if(fileType == "")
                          {
                              fileType = "文件夹";
                          }
                          html += "<td class='am-text-middle'>" + fileType +  "</td>";

                          var fileSize = item.fileSize;
                          if(fileSize == undefined)
                          {
                              fileSize = 0;
                          }
                          html += "<td class='am-text-middle'>" + fileSize +  "</td>";

                          html += "<td class='am-text-middle'>" + item.createTime +  "</td>";

                          html += "<td class='am-text-middle'>" + item.fileId +  "</td>";

                          html += "<td class='am-text-middle'><div class='tpl-table-black-operation'><a><i class='am-icon-pencil'></i>打开</a></div></td></tr>";

                          jQuery("#panlist").html(html);
                      }
                  }
               },
               error:function()
               {
                   alert("异常！");
               }
           });
       }
    });
</script>
</html>